<template>
  <div :style="{ fontSize:fontSize + 'px'}">
    <v-transparentheader
      title="我要策略" 
      @goBack="goBack"
      rightIcon="icon-liuyan"></v-transparentheader>
    <v-pullMask
      style="overflow: hidden"
      :state="isOpen"
      @openMask="openMack"
      @clickImg="closeMask"
      :background="require('../../assets/img/iwantstrategy/background.png')">
    </v-pullMask>
    <div :class="{ 'openContent' : isOpen }" class="content">
      <div v-if="networkState === 'online'" class="line"></div>
      <template v-if="networkState === 'online'">
        <v-timeline 
          title="投资偏好">
          <template slot="timeline-item">
            <div class="timeline-item">
              <div v-for="item in paraKey"
                   @click="selected(paraKey, item)"
                   :class="{ active_card : item.active }"
                   class="card">
                {{item.value}}
              </div>
            </div>
          </template>
        </v-timeline>
        <v-timeline 
          v-for="(key, idx) in paraKey"
          :key="idx"
          v-show="key.active"
          :title="key.value">
          <template slot="timeline-item">
            <div class="timeline-item" style="min-height: 11em;">
              <div class="card"
                v-for="(item, idx) in para[key.key]"
                @click="selected(para[key.key], item)"
                :class="{ active_card : item.active }"
                :key="idx">
                {{item.key}}
              </div>
            </div>
          </template>
        </v-timeline>
        <v-timeline 
          title="其他条件">
          <template slot="timeline-item">
            <div class="timeline-item">
              <v-options title="选择国家"
                         ref="selectedCountry"
                         @selected="selectedOptions"
                         style="height: 2.2em;margin: 0.2em 0"
                         :item="para.country"></v-options>
              <v-options title="资金规模"
                         ref="selectedSize"
                         style="height: 2.2em;margin: 0.2em 0"
                         @selected="selectedOptions"
                         :item="para.size"></v-options>
            </div>
          </template>
        </v-timeline>
        <div class="complateBtn"
             @click="gotoArithmetic"
             :class="{ 'openComplate' : isOpen, 'validate' : pass }">
          一键运算
        </div>
      </template>
      <v-networkerr v-else></v-networkerr>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
  name: 'iwantstrategy',
  data () {
    return {
      fontSize: 12,
      isOpen: false,
      para: {},
      pass: false,
      paraKey: [
        {
          key: 'feature',
          value: '按投资风格',
          active: false
        },
        {
          key: 'type',
          value: '按策略类型',
          active: false
        }
      ],
      networkState: 'online'
    }
  },
  watch: {

  },
  methods: {
    // 获取数据类
    findStrategyFilter () {
      if (!this.$store.state.networkState) {
        this.findStrategyFilterByCache(this.$config.cacheTime.offlineCache)
        return
      }
      window.localStorage.getItem('filterPara') ? 
      this.findStrategyFilterByCache(this.$config.cacheTime.onlineCache) : 
      this.findStrategyFilterByNetwork()
    },
    findStrategyFilterByCache (min) {
      this.$plugins.cacheControl.getCache('filterPara', min).then((res) => {
        this.para = res.data
      }).catch((err) => {
        if (!this.$store.state.networkState) {
          this.networkState = 'offline'
          return
        }
        this.findStrategyFilterByNetwork()
      })
    },
    findStrategyFilterByNetwork () {
      this.baseService.get('/strategy/filterPara').then((res) => {
        for(let i in res.data) {
          if (i === 'country') {
            res.data[i].forEach((item, idx) => {
              item.active = false
              item.key = item.n
            })
          } else {
            res.data[i].active = false
            res.data[i].forEach((item, idx) => {
              res.data[i][idx] = {
                key: item,
                active: false
              }
            })
          }
        }
        this.$plugins.cacheControl.setCache('filterPara', res.data)
        this.para = res.data
      }).catch((err) => {
        if (err === 'timeout') {
          this.$plugins.cacheControl.getCache('filterPara', this.$config.cacheTime.offlineCache).then((res) => {
            this.para = res.data
          }).catch((err) => {
            this.networkState = 'offline'
          })
        }
      })
    },
    // 工具类
    checkData () {
      this.pass = false
      this.paraKey.forEach((item, idx) => {
        if (!item.active) return
        this.para[item.key].forEach((item, idx) => {
          if (item.active) {
            if (this.$refs.selectedCountry.tip !== '' && this.$refs.selectedSize.tip !== '') {
              this.pass = true
            }
          }
        })
      })
    },
    selectedOptions () {
      this.checkData()
    },
    gotoArithmetic () {
      if (!this.pass) {
        Toast({
          message: '请检查全部选项',
          duration: 1000
        })
        return
      }
      let body = {
        size: this.$refs.selectedSize.tip
      }
      this.paraKey.forEach((para, idx) => {
        if (!para.active) return
        this.para[para.key].forEach((item, idx) => {
          if (item.active) body[para.key] = item.key
        })
      })
      this.para.country.forEach((item, idx) => {
        if (item.n === this.$refs.selectedCountry.tip) body.country = item.c
      })
      this.$router.push(`/arithmeticstrategy?query=${JSON.stringify(body)}`)
    },
    selected (items, item) {
      items.forEach((item, idx) => {
        item.active = false
      })
      item.active = true
      this.checkData()
    },
    openMack (type) {
      this.paraKey.forEach((item, idx) => {
        item.active = false
        if (item.key === type) item.active = true
      })
      this.isOpen = true
      this.checkData()
    },
    closeMask () {
      this.isOpen = false
    },
    goBack () {
      this.isOpen ? this.isOpen = false : this.$router.push('/index')
    }
  },
  mounted () {

  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
    this.findStrategyFilter()
  }
}
</script>

<style lang="less" scoped>
.content {
  height: 70%;
  padding: 0.5em 1em 0 1em;
  position: fixed;
  width: 100%;
  background: white;
  z-index: 997;
  transition: all 0.8s;
  .line {
    position: absolute;
    height: 100%;
    width: 2px;
    background: #EDF1F5;
    left: 1.385em;
    top: 1.5em;
    z-index: -5;
  }
}
.openContent {
  transform: translate3D(0, -100%, 0);
}
.complateBtn {
  background: white;
  border-radius: 60px 0 0 60px;
  height: 2em;
  width: 8em;
  font-size: 1.2em;
  color: #7A7AAB;
  letter-spacing: 4px;
  position: absolute;
  bottom: 0.5em;
  right: 1.6em;
  z-index: 998;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.8s;
  opacity: 0;
  transform: translate3D(100%, 0, 0);
  border: 1px solid #EDF1F5;
}

.validate {
  background: linear-gradient(42deg, #FF7C00 0%, #FF4949 100%);
  color: white;
  border: 1px solid white;
}

.openComplate {
  opacity: 1;
  transform: translate3D(0, 0, 0);
}
</style>
